body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #4AB6FF;
}

#logo-and-name {
    display: flex;
    align-items: center;
}

#logo2 {
    height: 50px;
}

#logo {
    width: auto; /* Auto width to maintain aspect ratio */
    height: 60px; /* You can adjust this for your preferred size */
    border: 2px solid yellow; /* Yellow border around the image */
    border-radius: 15px; /* Rounded corners for the logo image */
}

#site-name {
    margin-left: 10px;
    font-size: 24px;
    color: white;
}

/* Common styles for both quiz and hamburger menus */
#quiz-nav, #hamburger-menu {
    position: relative;
    margin-left: auto;
}

#quiz-menu-button, #hamburger-menu-button {
    background-color: #4AB6FF;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

#quiz-menu-content, #hamburger-menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
    min-width: 160px;
    top: 35px;
    right: 0;
    z-index: 1000;
}

#quiz-menu-content a, #hamburger-menu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

#quiz-menu-content a:hover, #hamburger-menu-content a:hover {
    background-color: #ddd;
}

#btn-login:hover {
    background-color: #e7e7e7; /* A slightly darker grey on hover */
}

/* Hamburger menu specific styles */
#hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    padding-right: 10px;
}

.bar {
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    margin: 5px 0;
}

.hidden, #user-display.hidden  {
    display: none;
}

.show, #hamburger-menu.show, #hamburger-menu-content.show, #dropdown-menu.show, #quiz-menu-content.show   {
    display: block;
}

#user-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: rgb(146, 143, 216);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

#dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(50% - 60px);
    transform: translateX(-50%);
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

#btn-login  {
    padding: 5px 10px;
    background-color: #fff; /* White background for the login button */
    color: #005a9c; /* Blue text color that matches the header */
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display=none;
}

/* Popup Styles */
#flagPopup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    justify-content: center;
    align-items: center;
}

#flagPopup form {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#commentBox {
    width: 100%;
    height: 100px;
    padding: 12px 20px;
    margin: 8px 0;
    border: 1px solid #ccc;
    box-sizing: border-box;
    resize: vertical;
}

.buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

#flagForm button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    flex: 0 1 auto;
}

#cancelButton {
    background-color: red;
}

#flagForm button:hover {
    opacity: 0.8;
}


/* Start of Hero Section CSS */
.hero {
    display: flex;
    justify-content: space-between; /* Align items on opposite ends */
    align-items: center; /* Center items vertically */
    text-align: left; /* Align text to the left */
    padding: 5vw; /* Responsive padding */
}

.hero-text {
    flex: 1; /* Take up remaining space */
    max-width: 50%; /* Maximum width of text container */
}

.hero-img-container {
    flex: 1; /* Take up remaining space */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 40%; /* Maximum width of image container */
}

.hero-image {
    max-width: 100%; /* Image will fill the container */
    height: auto;
    border-radius: 10%;
}

.hero-headline {
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Responsive font size */
    color: #e05aab;
    margin-bottom: 1rem;
}

.hero-subhead {
    font-size: clamp(1rem, 4vw, 1.5rem); /* Responsive font size */
    margin-bottom: 2rem;
}

.hero-cta {
    padding: 1vw 2vw; /* Responsive padding */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem); /* Responsive font size */
    background-color: #32a852;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase; /* Style preference */
    margin-bottom: 20px; /* Add space below the button */
}

.hero-results {
    font-size: clamp(0.875rem, 3vw, 1rem); /* Responsive font size */
    list-style: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align list items to the left */
    margin: 0; /* Remove default margin */
    padding-left: 0; /* Reset any padding if previously set */
}

.hero-results li {
    position: relative; /* Needed for absolute positioning of the checkmark */
    padding-left: 30px; /* Provide space for the checkmark */
    margin-bottom: 10px; /* Space between list items */
    padding-left: 40px; /* Increase left padding to indent the list items */
}

.hero-results li::before {
    content: '✓'; /* Unicode checkmark character */
    position: absolute;
    left: 0; /* Align checkmark to the left edge of the list item */
    top: 0; /* Align checkmark to the top of the list item */
    color: #32a852; /* Checkmark color - can match your brand color */
    font-size: 1.2em; /* Slightly larger checkmark size for visibility  */
}

/* End of Hero Section CSS */


/* Problem Solution Section */
.problem-solution-section {
    display: flex;
    align-items: flex-start; /* Align items to the top if they have different heights */
    padding: 20px;
    padding-top: 120px;
    gap: 20px; /* Space between the image and text */
}

.media-container {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex: 1; /* Allows the container to grow */
    max-width: 50%; /* Sets a maximum width for the container */
}


.media-image {
    width: 40%; /* Ensures the image fills the container */
    height: 40%; /* Ensures the image fills the container */
    max-height: 40%;
    height: auto; /* Maintains the aspect ratio of the image */
    border-radius: 10%;
}


.content-container {
    flex: 1; /* Allows the container to grow */
    max-width: 50%; /* Sets a maximum width for the container */
}

.content-container h2,
.content-container p {
    margin-bottom: 15px;
}

.content-container .highlight {
    font-weight: bold;
    color: #e05aab; /* Highlight color */ 
}

/* Benefits area */

.benefits-section {
    text-align: center; /* Center-align the text and content */
    padding: 20px; /* Add some padding for spacing */
    background-color: #f4f4f4; /* Match the background color to your site's design */
    padding-top: 120px;

}

.benefits-section h2 {
    color: #e05aab; /* Highlight color */ 
    margin-bottom: 30px; /* Space between the heading and the benefit items */
}

.benefits-container {
    display: flex;
    justify-content: space-around; /* Evenly space the benefit items */
    align-items: start; /* Align items to the top */
}

.benefit-item {
    width: 30%; /* Each benefit item takes up 30% of the container width */
    padding: 10px; /* Padding inside each benefit item */
}

.benefit-icon {
    max-width: 100px; /* Maximum width of the icon */
    height: auto; /* Maintain aspect ratio of the icon */
    margin-bottom: 15px; /* Space between the icon and the benefit title */
}

.benefit-item h3 {
    color: #333; /* Color for the benefit title */
    margin-bottom: 10px; /* Space between the title and the description */
}

.benefit-item p {
    color: #666; /* Color for the description text */
    font-size: 0.9rem; /* Smaller font size for the description */
}



/*   Pricing    */


.pricing-table table {
    width: 100%; /* The table will occupy the full width of its container */
    table-layout: fixed; /* This layout algorithm will divide the width equally among columns */
    border-collapse: collapse; /* Optional: collapses border spacing */
}

.pricing-table th, 
.pricing-table td {
    border: 1px solid #ccc; /* Just for visual structure */
    text-align: center; /* Center the text in each cell */
    padding: 10px; /* Add some padding for a nicer look */
    word-wrap: break-word; /* To prevent overflow by breaking long words */
}

/* Optional: If you want the first column to be a bit larger */
.pricing-table th:first-child,
.pricing-table td:first-child {
    width: 30%; /* Adjust the percentage as needed */
}

/*  Old pricing */


.pricing-section-padding {
    padding-top: 755px;
}

.plans {
    width: 100%;
    padding-top: 200px;
}

.pricing-tabl2 table2 {
    width: 100%;
    border-collapse: collapse;
    padding-top: 155px; 
}

.pricing-table2 th,
.pricing-table2 td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.pricing-table th {
    background-color: #4AB6FF;
    color: white;
    font-size: 1.1em;
}

.pricing-table td {
    background-color: #f4f4f4;
}

/* Highlight the column for the Premium plan */
.pricing-table td:last-child,
.pricing-table th:last-child {
    background-color: #6200EA;
    color: white;
}

/* Additional styles to make it stand out or match your website's theme */
/* ... */

.offer {
    padding-top: 130px;
    padding-bottom: 200px;
}


/* ############################################## */
/* About page styles */
/* ############################################## */

#about-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

#about-container h1 {
    text-align: center;
    color: #4AB6FF;
}

#about-container section {
    margin-bottom: 40px;
}

#about-container h2 {
    color: #333;
    margin-bottom: 10px;
}

#about-container p {
    color: #666;
    line-height: 1.6;
}

#about-container a {
    color: #4AB6FF;
    text-decoration: none;
}

#about-container a:hover {
    text-decoration: underline;
}



/* ############################################## */
/* Footer styles */
/* ############################################## */

#page-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 8px 0;
}

.footer-content {
    display: flex;
    justify-content: space-evenly;
    align-items: top;
    flex-wrap: wrap; /* Wrap items in smaller screens */
}

.footer-section {
    flex: 1;
    min-width: 200px; /* Prevent sections from getting too narrow */
    padding: 0 20px;
    text-align: left; /* Align text to the left for better readability */
}

.footer-section h3 {
    margin-bottom: 10px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margin */
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #4AB6FF;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 5px;
    text-align: center; /* Center-align the bottom text */
}



@media screen and (max-width: 768px) { /* Adjust the max-width as needed for your design */
    .pricing-table {
        overflow-x: auto; /* Enables horizontal scrolling */
        margin: 0 -20px; /* Optional: to extend the table to the edges of the screen */
    }

    table {
        min-width: 600px; /* Minimum table width or adjust based on your table content */
    }
}